// 项目页面
<template>
  <div class="projects-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="搜索项目名称"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">
        新增项目
      </el-button>
    </div>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="_id" label="ID" width="80" align="center" />
      <el-table-column prop="name" label="项目名称" min-width="100" />
      <el-table-column
        prop="StorageAddress"
        label="项目仓库地址"
        min-width="100"
      />
      <el-table-column prop="status" label="状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="startDate"
        label="开始日期"
        width="120"
        align="center"
      />
      <el-table-column
        prop="endDate"
        label="结束日期"
        width="120"
        align="center"
      />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import axios from "axios";
export default {
  name: "ProjectsManagement",
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        进行中: "primary",
        已完成: "success",
        已暂停: "warning",
        已取消: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: [],
      SearchForPreviousProjects: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        name: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 时间处理函数
    formatToDateString(str) {
      const date = new Date(str);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 获取数据处理
    getList() {
      // FetchProjects
      // 获取项目列表数据
      axios.get("http://127.0.0.1:3000/api/FetchProjects").then(
        (response) => {
          // 将api数据赋值给data
          console.log(response.data.data);
          const data = response.data.data;
          // 遍历data里面的time替换正则
          data.forEach((item) => {
            item.startDate = this.formatToDateString(item.startDate);
            item.endDate = this.formatToDateString(item.endDate);
          });
          // 最终将data数据赋值给list
          this.list = data;
          this.total = data.length;
          this.SearchForPreviousProjects = data;
        },
        (error) => {
          console.log(error);
        }
      );
    },
    // 搜索处理
    handleFilter() {
      this.listQuery.page = 1;
      // this.getList();
      this.list = this.SearchForPreviousProjects.filter((item) =>
        item.name.includes(this.listQuery.name)
      );
    },
    // 新建处理
    handleCreate() {
      this.$router.push({ name: "ProjectEdit" });
    },
    // 编辑处理
    handleEdit(article) {
      // this.$router.push({
      //   name: "ProjectEdit",
      //   params: { id: row.id },
      // });
      this.$router.push({
        name: "ProjectEdit",
        params: {
          id: article._id,
          name: article.name,
          description: article.description,
          StorageAddress: article.StorageAddress,
          status: article.status,
          startDate: article.startDate,
          endDate: article.endDate,
        },
        query: {
          id: article._id,
          name: article.name,
          description: article.description,
          StorageAddress: article.StorageAddress,
          status: article.status,
          startDate: article.startDate,
          endDate: article.endDate,
        },
      });
    },
    // 删除处理
    handleDelete(article) {
      this.$confirm("确认删除该项目吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .delete(`http://127.0.0.1:3000/api/DeleProject/${article._id}`)
            .then(() => {
              this.$message.success("删除成功");
              this.getList();
            });
        })
        .catch(() => {
          this.$message.warning("删除失败");
        });
    },
  },
};
</script>

<style scoped>
.projects-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.filter-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
